<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/App/WebApp/template/plantilla.xhtml"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="content">

        <h:form id="form">  

            <script type="text/javascript">
                function handleDrop(event, ui) {
                    var myDim = ui.draggable;
                    myDim.fadeOut('fast');
                }
            </script>
            
            <p:panel rendered="#{empty indexController.estacionSeleccionda}">
                <h:outputText 
                value="Seleccione una estación" 
                style="font-size:20px; text-align: center" />
            </p:panel>
             

            <p:fieldset 
                id="magSelect" 
                style="margin-top: 20px; margin-bottom: 20px" 
                legend="Estación: #{indexController.estacionSeleccionda.codigo}" 
                rendered="#{not empty indexController.estacionSeleccionda}"
                >
                

                <p:outputPanel id="dropArea">  
                    

                    <h:outputText value="Arrastre Aquí las Magnitudes a Monitorear"  
                                  rendered="#{empty indexController.detalleSeleccionado}"  
                                  style="font-size:20px; text-align: center" />  

                    <p:dataGrid id="magnitudesSeleccionadas"
                                var="detalle"  
                                value="#{indexController.detalleSeleccionado}" 
                                columns="4" 
                                rendered="#{not empty indexController.detalleSeleccionado}">  
                        
                        <p:panel id="pnl" 
                                 header="#{detalle.magnitud.descripcion}"
                                 style="text-align:center; width: 180px"
                                 >
                           
                            <h:panelGrid columns="1" width="100%">
                                <h:outputText value="#{indexController.ultValor(detalle)} #{detalle.unidadMedida.simbolo}" style="font-size: 20px"/>
                                <p:graphicImage value="/resources/images/magnitudes/#{detalle.magnitud.nombreimagen}.png" height="70px" width="79px"/> 
                                <h:outputText value="Actualizado al:" style="font-size: 10px"/>
                                <h:outputText value="#{indexController.fechaUltMuestra(detalle)}" style="font-size: 10px">
                                    <f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
                                </h:outputText>
                                
                                <h:panelGrid columns="2" width="100%">
                                    <p:commandButton icon="ui-icon-disk" title="Ir a Datos" actionListener="#{datosExport.cargarDetalle(detalle)}"/>
                                    <p:commandButton icon="ui-icon-closethick" title="Quitar de la lista" update=":form" actionListener="#{indexController.quitarMagnitud(detalle)}"/> 
                                </h:panelGrid>
                            </h:panelGrid>

                        </p:panel>
                                                
                    </p:dataGrid>
                    
                </p:outputPanel>  

            </p:fieldset>

            <p:droppable for="magSelect" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="magnitudesDisponibles" onDrop="handleDrop">  
                <p:ajax listener="#{indexController.onMagnitudDrop}" update="dropArea magnitudesDisponibles" />  
            </p:droppable>

            <p:fieldset 
                legend="Magnitudes Disponibles" 
                rendered="#{not empty indexController.estacionSeleccionda}"
                >

                <p:dataGrid id="magnitudesDisponibles" 
                            var="detalle"  
                            value="#{indexController.detalleDisponible}" 
                            columns="4"
                            emptyMessage="No hay magnitudes disponibles.">  

                    <p:graphicImage id="mag-img" value="/resources/images/magnitudes/#{detalle.magnitud.nombreimagen}-ico.png" />

                    <p:draggable for="mag-img" revert="true"  handle=".ui-panel-titlebar" stack=".ui-panel"/>  

                </p:dataGrid>  

                <div class="comentario">
                    Puede Arrastrar una magnitud para hacerle un seguimiento en linea!
                </div>

            </p:fieldset>
                       
        </h:form>

    </ui:define>

</ui:composition>

